<template>
  <div class="app-container">
    <h2 style="text-align: center;">课程发布流程</h2>
    <el-steps :active="3" finish-status="success">
      <el-step title="步骤 1" description="填写课程基本信息" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" description="创建课程基本大纲" icon="el-icon-tickets"></el-step>
      <el-step title="步骤 3" description="发布课程" icon="el-icon-upload"></el-step>
    </el-steps>
    <el-card class="box-card" style="height: 25rem;width: 60%;margin-left: 20%;">
      <div class="demo-image__placeholder">
        <div class="block" style="width:45%;float: left;">
          <el-image style="width: 100%;height: 22.5rem;border-radius: 0.25rem;"  :src="this.courseSubmitFinally.cover"></el-image>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;">
          <div style="font-size: larger;font-weight: bold;text-align: center;">{{this.courseSubmitFinally.title}}<a v-show="this.status==true?true:false" style="font-size: 0.75rem;margin-left: 0.1875rem;color: white;background-color: brown;border-radius: 0.3125rem;">已发布</a></div>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课程分类:   {{this.courseSubmitFinally.subjectonetype}}-{{this.courseSubmitFinally.subjecttwotype}}
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
         <img :src="this.courseSubmitFinally.teacherAvatar" style="width: 3.4375rem;height: 3.4375rem;"/>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课程讲师:   {{this.courseSubmitFinally.teacherName}}
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          课时数量:<span style="font-weight: bold;color: #409EFF;"> {{this.courseSubmitFinally.lessonNum}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          <span>课程价格:</span><span style="font-weight: bold;color: red;">￥{{this.courseSubmitFinally.price}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;font-size: small;margin-top:0.5375rem;">
          <span>是否免费:</span><span style="font-weight: bolder;color: chartreuse;" v-show="this.free==false?true:false">{{this.courseSubmitFinally.isfree}}</span>
          <span style="font-weight: bolder;color: brown;" v-show="this.free==true?true:false">{{this.courseSubmitFinally.isfree}}</span>
        </div>
        <div class="block" style="width: 53%;float: right;margin-left: 2%;background-color: whitesmoke;margin-top: 0.125rem;font-size: small;border-radius: 0.25rem;margin-top:0.5375rem;">
            <textarea :disabled="true" class="mytextarea">{{this.courseSubmitFinally.description}}</textarea>
        </div>
        <div></div>
      </div>

    </el-card>
      <el-button type="primary" style="margin-top: 0.3125rem;float: left;" @click="previous">上一步</el-button>
      <el-button type="primary" style="margin-top: 0.3125rem;float: right;" @click="next">发布</el-button>
  </div>

</template>

<script>
  import course from '@/api/edu/course'
  export default {
    data() {
      return {
        active: 0,
        courseSubmitFinally:{},
        courseid: '',
        free: '',
        status: '',
      };
    },
    created(){
      if(this.$route.params.id){
        this.courseid=this.$route.params.id
        this.getcourseinfofinallysubmit()
      }
    },
    methods: {
      //课程的最终发布
      submitcoursex(){
        course.submitcourse(this.courseid).then(response => {
          if(response.data.coursesubmitbyId==true){
            this.$message({
              type: 'success',
              message: '课程发布成功'
            })
          }else{
            this.$message({
              type: 'error',
              message: '课程发布失败'
            })
          }
        })
      },
      //课程信息确认   回显信息
      getcourseinfofinallysubmit(){
        course.getcourseSubmitFinally(this.courseid).then(response => {
          this.courseSubmitFinally=response.data.courseSubmitFinally
          if(this.courseSubmitFinally.isfree==="免费"){
            this.free=false
          }
          if(this.courseSubmitFinally.isfree==="付费"){
            this.free=true
          }
          if(this.courseSubmitFinally.status==='Draft'){
            this.status=false
          }
          if(this.courseSubmitFinally.status==='Normal'){
            this.status=true
          }
        })
      },
      previous() {
        this.$router.push({
          path: '/course/chapter/'+this.courseid
        })
      },
      next() {
        // if (this.active++ > 2) this.active = 0;
        this.submitcoursex()
        this.$router.push({
          path: '/course/list'
        })
      }
    }
  }
</script>

<style>
.mytextarea{

  font-size: smaller;
  width:100%;/*自动适应父布局宽度*/
  height: 9.375rem;
  overflow:auto;
  word-break:break-all;
  border: hidden;
  scrollbar-face-color: #889B9F;
  scrollbar-width: 0.0625rem;
  scrollbar-shadow-color: #3D5054;

  scrollbar-highlight-color: #C3D6DA;

  scrollbar-3dlight-color: #3D5054;

  scrollbar-darkshadow-color: #85989C;

  scrollbar-track-color: #95A6AA;

  scrollbar-arrow-color: #FFD6DA;
}
</style>
